<template>
	<view class="main-container">
		<view class="no-data" v-if="machineList.length == 0" @click="getMachineList">
			<!-- <image mode="aspectFit" class="no-data-img"></image> -->
			{{ noData }}
		</view>
		<scroll-view class="machine-lists" scroll-y="true" :style="'width:100%;height:100%'" enable-flex @scrolltolower="scrollToLower">
			<view class="new_machine_item">
				<uni-grid :column="2" :showBorder="false">
					<block v-for="(item, index) in machineList" :key="index">
						<uni-grid-item style="height: 600rpx; margin-top: 15rpx">
							<view @click="machineDetail(machineList[index])" class="view_item_right">
								<image @load="loadImg($event)" :src="item.image" style="width: 100%; height: 350rpx"></image>
								<!-- <view class="machine_info">
									<text class="machine_lable" style="color: #000000; font-size:24rpx;margin: 0 auto;">仪器编号：{{item.insBasic.instruCode}}</text>
								</view> -->
								<view class="machine_info">
									<view>
										<text class="machine_lable">名称：{{ item.intName ? item.intName : '暂无' }}</text>
										<view>
											<text class="machine_lable">规格：{{ item.model ? item.model : '暂无' }}</text>
										</view>
										<!-- <view>
											<text class="machine_lable">价格：{{ item.mInstruServiceCharge ? item.mInstruServiceCharge : '暂无' }}</text>
										</view> -->
									</view>
								</view>
							</view>
						</uni-grid-item>
					</block>
				</uni-grid>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import env from '../../../utils/env';
import uniTag from '@/components/uni-tag/components/uni-tag/uni-tag.vue';
import uniGrid from '@/components/uni-grid/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid/components/uni-grid-item/uni-grid-item.vue';
import * as machine from '@/api/personCenter/JCJYFWXXB.js';
import * as yqgxfwxxb from '@/api/personCenter/YQGXFWXXB.js';
export default {
	components: {
		uniTag,
		uniGrid,
		uniGridItem
	},
	data() {
		return {
			showPage: false,
			// 订单列表高度
			machineHeight: 0,
			// 是否还有更多数据
			noMoreData: {},
			// 订单列表
			machineList: [],
			// 页码
			pageArr: '0',
			// 每页请求数
			pageSize: 10,
			orderStatus: '',
			noData: '加载中。。。',
			query: {
				pageNum: 1,
				pageSize: 6,
				status: 2
			}
		};
	},
	onLoad(option) {
		this.orderStatus = option.orderType;
		this.getMachineList();
	},
	methods: {
		// 加载订单列表
		getMachineList() {
			uni.showLoading({
				title: '加载中。。。'
			});
			this.noData = '加载中。。。';
			yqgxfwxxb.getKYYQKList({ ...this.query, intType: this.orderStatus }).then((res) => {
				res.rows.forEach((v) => {
					v.image = `${env.imgUrl}` + v.image?.split(',')[0];
					this.machineList.push(v);
				});

				if (this.machineList.length == 0) {
					this.noData = '暂无数据，点击重试';
				}
			});
			// if (this.orderStatus == '1') {
			// 	machine.listYQGXFWXXB(this.query).then((res) => {
			// 		res.rows.forEach((v) => {
			// 			v.image = `${env.imgUrl}` + v.image;
			// 			this.machineList.push(v);
			// 		});

			// 		if (this.machineList.length == 0) {
			// 			this.noData = '暂无数据，点击重试';
			// 		}
			// 	});
			// } else if (this.orderStatus == '3') {
			// 	machine.listSYFWXXB(this.query).then((res) => {
			// 		res.rows.forEach((v) => {
			// 			v.image = `${env.imgUrl}` + v.image;
			// 			this.machineList.push(v);
			// 		});

			// 		if (this.machineList.length == 0) {
			// 			this.noData = '暂无数据，点击重试';
			// 		}
			// 	});
			// } else {
			// 	machine.listJCJYFWXXB(this.query).then((res) => {
			// 		res.rows.forEach((v) => {
			// 			v.image = `${env.imgUrl}` + v.image;
			// 			this.machineList.push(v);
			// 		});
			// 		if (this.machineList.length == 0) {
			// 			this.noData = '暂无数据，点击重试';
			// 		}
			// 	});
			// }

			uni.hideLoading();
		},
		// 更新machine
		updatemachineInfo() {
			this.getMachineList();
		},
		// 滑到底部 加载更多
		scrollToLower() {
			this.query.pageNum = this.query.pageNum + 1;
			this.getMachineList();
		},
		machineDetail(item) {
			uni.navigateTo({
				url: '/subpages/pages/detail/servicemachine_detail?id=' + item.intId + '&orderType=' + this.orderStatus
			});
		},
		loadImg(e) {
			uni.hideLoading();
			console.log('图片信息', e);
		}
	},
	computed: {}
};
</script>

<style>
.main-container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-color: #e1e1e1;
}

.main-container .tab-bar {
	width: 100%;
}

.main-container .machine-lists {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
.no-data {
	width: 100%;
	height: 300rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	margin-top: 100rpx;
}
.no-data .no-data-img {
	width: 300rpx;
	height: 268rpx;
}

/* 	*  订单部分  * */
.machine-item {
	width: 750rpx;
	min-height: 460rpx;
	max-height: 640rpx;
	background: #ffffff;
	opacity: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.machine-top {
	position: relative;
	margin-top: 30rpx;
}
.machine-item .real-pay {
	height: 60rpx;
	align-self: flex-end;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #0c0900;
	opacity: 1;
	padding-right: 40rpx;
	box-sizing: content-box;
}
.machine-item .real-pay .good-price {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	line-height: 40rpx;
	color: #686661;
	opacity: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	float: right;
	margin-left: 105rpx;
}

.machine-item .machine-top {
	width: 670rpx;
	height: 60rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.machine-top .machine-no {
	height: 44rpx;
	width: 20%;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	line-height: 44rpx;
	color: #686661;
	opacity: 1;
}

.machine-top .machine-status-1 {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #0c0900;
	opacity: 1;
}

.machine-item .good-box {
	width: 680rpx;
	height: 230rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.machine-item .good-box .good-img {
	width: 200rpx;
	height: 200rpx;
	opacity: 1;
	bmachine-radius: 16rpx;
}

.good-box .good-info {
	width: 446rpx;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.good-info .good-title {
	width: 446rpx;
	height: 88rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	line-height: 44rpx;
	color: #000000;
	opacity: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.good-info .good-bottom {
	width: 100%;
	height: 50rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.good-info .good-bottom .attr {
	/* width: 260rpx; */
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	line-height: 40rpx;
	color: #686661;
	opacity: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	float: left;
}

.good-info .good-bottom .good-price {
	height: 50rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 50rpx;
	color: #0c0900;
	opacity: 1;
}

.machine-item .machine-bottom {
	/* width: 670rpx; */
	flex: 1 0 128rpx;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	bmachine-top: 2rpx solid #e7e9ee;
	margin-top: 20rpx;
	position: relative;
	bottom: 0;
	z-index: 99;
}

.need-pay {
	/* 		width: 180rpx; */
	background: #f86341;
	opacity: 1;
	bmachine-radius: 32rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
	opacity: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
/**
	 * 超值大礼包
	 */
.buy-wine {
	width: 100%;
	color: #f86341;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translateY(-45%);
}
.buy-wine .wine-img {
	width: 686rpx;
	height: 136rpx;
}
/**
	 * 邀请参团
	 */
.machine-bottom .invite-user {
	display: flex;
}

.invite-btn {
	width: 180rpx;
	height: 64rpx;
	background: #ffffff;
	bmachine: 2rpx solid #f86341;
	opacity: 1;
	bmachine-radius: 32rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #f86341;
	opacity: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 20rpx;
	margin-top: -8rpx;
	z-index: 999;
}

.devideline {
	float: left;
	height: 0.3rpx;
	margin-top: 15rpx;
	padding-bottom: 15rpx;
	background-color: #eeeeee;
}

.in-devideline {
	float: left;
	height: 0.3rpx;
	width: 90%;
	margin-left: 25rpx;
	margin-right: 25rpx;
	margin-top: 25rpx;
	margin-bottom: 25rpx;
	background-color: #eeeeee;
}

/* 新布局 */
.new_machine_item {
	height: 600rpx;
	width: 98%;
	padding-left: 3%;
	margin-top: 15rpx;
	text-align: center;
}

.view_item_right {
	height: 600rpx;
	width: 90%;
	font-size: 35rpx;
	color: #fff;
	border: #e0e0e0 1px solid;
	border-radius: 15rpx;
	margin-top: 15rpx;
	text-align: center;
	background-color: #fff;
	/* 	float: left; */
}

.machine_lable {
	display: -webkit-box;
	color: #000000;
	font-size: 24rpx;
	line-height: 40rpx;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.machine_info {
	margin: 20rpx 15rpx 20rpx 15rpx;
}
</style>
